<template>
	<view class="body" :style="{height:screenHeight}">
		<!-- <uni-nav-bar @clickLeft="goBack" leftIcon="back" backgroundColor="#3e4e66" :color="color" statusBar  :title="title" :border='false'  /> -->
		<u-navbar :title="title" style="color: #3e4d65;" :bgColor="backgroundColor" autoBack :leftIconColor="color">
		</u-navbar>

		<u-toast ref="uToast"></u-toast>
		<view style="height: 35%;">
			<view style="padding-top: 200rpx;margin: auto;width: 120px;height: 120px;">
				<u--image :src="logoSrc" width="120px" height="120px"></u--image>
			</view>
		</view>
		<view class="login">
			<u--form labelPosition="left" :model="account" :rules="rules" ref="uForm">
				<u-form-item prop="userName" borderBottom>
					<u--input placeholder="请输入用户名" prefixIcon="account" prefixIconStyle="font-size: 22px;color: #cad3d6"
						color="#cad3d6" v-model="account.userName" border="none">
					</u--input>
				</u-form-item>
				<u-form-item prop="password1" borderBottom>
					<u--input placeholder="请输入密码" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #cad3d6"
						password color="#cad3d6" v-model="account.password1" border="none">
					</u--input>
				</u-form-item>
				<u-form-item prop="password2" borderBottom>
					<u--input placeholder="请确认密码" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #cad3d6"
						password color="#cad3d6" v-model="account.password2" border="none">
					</u--input>
				</u-form-item>
				<u-form-item prop="email" borderBottom>
					<!-- 小程序中用后置没反应还得是flex -->
					<view style="display: flex;justify-content: space-between;width: 100%;">
						<u--input placeholder="请输入邮箱" prefixIcon="email"
							prefixIconStyle="font-size: 22px;color: #cad3d6" color="#cad3d6" v-model="account.email"
							border="none">
						</u--input>
						<view>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
							</u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="code" borderBottom>
					<u--input maxlength="6" placeholder="请输入验证码" prefixIcon="chat" prefixIconStyle="font-size: 22px;color: #cad3d6"
						color="#cad3d6" v-model="account.code" border="none">
					</u--input>
				</u-form-item>
				<view style="height: 120rpx;"></view>
				<u-button  text="注册" color="linear-gradient(to right, #3dbdad, #00b6d1)" @click="submit"></u-button>
			</u--form>
		</view>
	</view>
</template>

<script>
	import api from '../api.js'
	export default {

		data() {
			return {
				screenHeight: this.$store.screenHeight,
				backgroundColor: '#3e4d65',
				title: "注册",
				color: "#f0f0f0",
				logoSrc: "/static/logo.png",
				account: {
					userName: "tianchuan",
					email: "3167763508@qq.com",
					password1: "123456",
					password2: "123456",
					code: ""
				},
				tips: '',
				// refCode: null,
				seconds: 60,
				rules: {
					'email': [{
						type: 'string',
						required: true,
						message: "请输入邮箱",
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						}
					}],
					'password1': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur']
					},
					'password2': {
						type: 'string',
						required: true,
						message: '请确认密码',
						trigger: ['change', 'blur']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					},
					'userName': {
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur']
					}
				}
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.register();
				}).catch(errors => {})
			},
			async register(){
				var res = await api.Register(this.account)
				console.log(res);
				if(res.successed){
					this.$refs.uToast.show({type: 'success',message:res.message,complete(){
						uni.navigateBack()
					}})
				}else{
					this.$refs.uToast.show({type: 'error',message:res.message})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					var res = await api.SendCode({email:this.account.email})
					if(res.successed){
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$refs.uToast.show({type: 'success',message:res.message})
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 1000);
					}else{
						this.$refs.uToast.show({type: 'error',message:res.message})
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {

			},
			start() {

			}
		}
	}
</script>

<style lang="scss">
	.body {
		background: linear-gradient(#415169, #1e2d43);

		.login {
			width: 90%;
			margin: auto;

			.suffix {
				display: flex;
				right: 0;
				color: #cad3d6;
			}

			.register {
				margin: 30px 0;
				text-align: center;
				color: #f0f0f0;
			}
		}
	}

	.u-navbar__content__title {
		color: #f0f0f0 !important;
	}
</style>
